<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <!--公用头部-->
    <th:block th:replace="common/head::commonHead(代码生成器-小邑)" />
    <style>

    </style>
</head>
<!--公用js-->
<th:block th:replace="common/head::commonJs" />
<body marginwidth="0" marginheight="0">
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
           <form class="layui-form" action="" id="genForm">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">表名</label>
                            <div class="layui-input-inline">
                                <input id="tableName" name="tableName" class="layui-input" autocomplete="off"
                                       type="text" placeholder="请输入表名"/>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">表描述</label>
                            <div class="layui-input-inline">
                                <input id="tableDescribe" name="tableDescribe" autocomplete="off" class="layui-input"
                                       type="text" placeholder="请输入表描述"/>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="button" id="searchBtn"
                                    class="xy-btn xy-btn-primary icon-btn xy-btn-md">
                                <i class="layui-icon">&#xe615;</i> 搜索
                            </button>
                        </div>
                    </div>
                </form>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body">
            <table id="genTable" lay-filter="genTable"></table>
        </div>
    </div>
</div>

<!-- 行工具栏 -->
<script type="text/html" id="tableBar">
    <a class="xy-btn xy-btn-xs xy-btn-primary" lay-event="generate">生成代码</a>
</script>

<script>
    layui.use(['table', 'jquery', 'layer', 'util'], function () {
        var table = layui.table,
            layer = layui.layer,
               $ = layui.jquery,
            util = layui.util;
            util.fixbar({
                top: true //返回顶部
                , css: { right: 50, bottom: 50 }
                , bgcolor: '#3b7cd8'
                , click: function (type) {

                }
            });
           var tableIns = table.render({
               elem: '#genTable'
               ,url: basePath+ '/generator/list'
               ,cellMinWidth: 100
               ,skin: 'line'
               // ,height: 'full-183'
               ,cols: [ [
                   {type: 'checkbox'}
                   ,{field:'tableName', title: '表名', align:"center", minWidth: 150}
                   ,{field:'dataRows', title: '数据行', align:"center"}
                   ,{field:'tableDescribe', title: '表描述', align:"center"}
                   ,{field:'createTime', title: '创建时间', minWidth: 160, align:"center"}
                   ,{field:'updateTime', title: '修改时间', minWidth: 160, align:"center"}
                   ,{fixed: 'right', align: 'center', toolbar: '#tableBar', minWidth: 100, title: '操作'}
               ] ]
               ,limit: 10
               ,limits: [10, 20, 50, 100]
               ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                   layout: [  'prev', 'page', 'next', 'skip','count','limit'] //自定义分页布局
                   , curr: 1 //设定初始在第 5 页
                   , groups: 5 //只显示 1 个连续页码
                   , first: false //不显示首页
                   , last: false //不显示尾页
                   , theme:"#1E9FFF"
               }
           });

           // 搜索
           $('#searchBtn').on('click',function () {
               tableIns.reload({
                   where: getFormData('genForm')
               });
           });

           // 生成代码
           function execute(data) {
               layer.open({
                   skin: 'layer-ext-myskin',
                   type: 2,
                   title:'生成代码',
                   content: basePath+ '/view/generator/addGenerator?tableName=' + data.tableName,
                   area: ['90%', '90%'],
                   max: true
               });
           }

           // 表格行工具栏事件监听
           table.on('tool(genTable)', function (obj) {
               var data = obj.data
                   ,event = obj.event;
               if(event === 'generate') {
                   execute(data);
               }
           });

       });
   </script>

</body>
</html>